<template>
  <div>
    <h1 style="text-align: center; padding-top: 20px">产品列表</h1>
    <div class="sumgoods">
      <div class="goods" v-for="item in goods" :key="item.id">
        <div class="goods1">
          <img :src="item.image" />
          <p>产品{{ item.id }}</p>
          <input type="button" value="商品详情" @click="good(item.id)" />
        </div>
      </div>
      <div :class="{ good: ifgood }" :style="{ display: ifnone }">
        <input type="button" value="关闭" @click="cancelgood" />
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { reactive, ref } from "vue";
  import { useRouter } from "vue-router";

  const ifnone = ref("none");
  const ifgood = ref(false);
  const router = useRouter();
  const goods = reactive([
    { id: 1, image: "/src/assets/logo.svg" },
    { id: 2, image: "/src/assets/logo.svg" },
    { id: 3, image: "/src/assets/logo.svg" },
    { id: 4, image: "/src/assets/logo.svg" },
  ]);
  function good(id) {
    router.push(`/home/products/products/${id}`);
    ifgood.value = true;
    ifnone.value = "block";
  }
  function cancelgood() {
    ifgood.value = false;
    ifnone.value = "none";
    router.push("/home/products");
  }
</script>
<style scoped>
  .good {
    position: fixed;
    z-index: 1;
    width: 50%;
    height: 50%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    left: 30%;
    top: 42%;
  }

  .sumgoods {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    margin-top: 40px;
  }

  .goods {
    width: 800px;
    display: flex;
    gap: 50px;
  }

  .goods1 {
    width: 120px;
    height: 120px;
  }
</style>
